<template>
	<view class="page-modals" v-if="modalsOptions.length">
		<view class="confiirm">
			<view class="this-body" v-for="(one, index) of modalsOptions">
				<view class="title-box">
					<view class="name">{{ one.title || '温馨提示' }}</view>
					<view
						class="iconfont icon-close"
						@click="close(one, index)"
						v-if="one.allowedClose"
					></view>
				</view>
				<view class="content">{{ one.content }}</view>
				<view class="btns">
					<view class="btn close" @click="close(one, index)" v-if="one.chanelText">
						{{ one.chanelText }}
					</view>
					<view
						class="btn ok"
						@click="ok(one, index)"
						:class="[one.type || 'info']"
						v-if="one.okText"
					>
						{{ one.okText }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	computed: {
		modalsOptions() {
			return this.$store.state.modalsOptions;
		}
	},
	data() {
		return {};
	},
	created() {
		let THIS = this;
	},
	methods: {
		ok(one, index) {
			one.okCallBack ? one.okCallBack() : '';
			this.$store.state.modalsOptions.splice(index, 1);
		},
		close(one, index) {
			one.chanelCallBack ? one.chanelCallBack() : '';
			this.$store.state.modalsOptions.splice(index, 1);
		}
	}
};
</script>

<style lang="scss" scoped="">
.page-modals {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 101;

	.confiirm {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		overflow-y: auto;
		.this-body {
			background-color: #fff;
			width: 600upx;
			border-radius: 6upx;
			margin-bottom: 20upx;
			box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
			color: $uni-text-color;
			font-size: $uni-font-size-lg;

			.title-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20upx 20upx;
				font-size: 40upx;
				.iconfont {
					color: $uni-text-color-disable;
				}
			}

			.content {
				padding: 40upx 20upx;
				text-align: center;
			}

			.btns {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 20upx 20upx;
				font-size: $uni-font-size-base;

				.btn {
					text-align: center;
					padding: 8upx;
					border-radius: 8upx;
					width: 200upx;
					box-shadow: 0 0 20upx #eee;
					border-radius: 50upx;
					height: 40upx;
					line-height: 40upx;

					&:active {
						opacity: 0.7;
					}
				}

				.ok {
					text-align: center;
					background: $juhe-info-color;
					color: #fff;
					border-radius: 50upx;
					max-width: 200upx;
					width: 200upx;
					box-shadow: 0 10upx 20upx rgba(81, 211, 241, 0.2);

					&.success {
						background: $juhe-success-color;
					}
					&.info {
						background: $juhe-info-color;
					}
					&.warning {
						background: $juhe-warning-color;
					}
					&.danger {
						background: $juhe-danger-color;
					}
				}
			}
		}
	}
}
</style>
